<script setup>

import CommonBox from "../../components/CommonBox.vue";
import {ref} from "vue";


const option = ref({
  legend: {
    textStyle: {
      color: 'white'
    }
  },
  xAxis: {
    show: true,
    type: 'value'
  },
  yAxis: {
    type: 'category',
    inverse: true,
    data: ['备品备件', '低值易耗品', '辅助材料', '原材料']
  },
  series: [
    {
      type: 'bar',
      symbolSize: 30,
      itemStyle: {
        color: '#52A8FF',
        normal: {

          color: function (params) {
            // 定义一个颜色集合
            let colorList = [
              '#52A8FF',
              '#00B389',
              '#FFA940',
              '#FF5A57',
              '#29EFC4',
              '#F8AEA4',
              '#FFC53D',
              '#009982',
              '#C099FC',
              '#F5855F',
            ];
            // 对每个bar显示一种颜色
            return colorList[params.dataIndex];
          },
        },
      },
      data: [180, 130, 230, 260]
    }

  ]
});

</script>

<template>
  <common-box>
    <div class="chart-header">
      采购到货分析金额
    </div>
    <div style="height: 15em;width: 100%;">
      <v-chart :option="option"></v-chart>
    </div>
  </common-box>
</template>

<style scoped>
.chart-header {
  text-align: center;
  font-size: 1.5em;
  padding: 0.2em 0 0.2em 1em;
}
</style>